<template>
	<view class="detail-attr" >
		<app-iphone-x>
			<view class="attr-content"  slot="empty-area">
				<view class="top dir-left-nowrap">
					<view class="image-view">
						<image :src="attr_pic_url ? attr_pic_url : image_url" @click="clickImage(index)"></image>
					</view>
					<view class="price dir-top-nowrap">
						<text class="des">定金￥{{attr_deposit}}抵￥{{attr_swell_deposit}}</text>
						<text class="swell" v-if="level_show == 0 || level_show == 2">
							￥{{attr_price}}
							<text class="swell-text"> 预售价</text>
						</text>
						<text class="swell" style="color: #f49f18;" v-if="level_show === 1">
							￥{{attr_price_member}}
							<text class="swell-text"> 会员价</text>
						</text>
						<text class="stock">库存{{attr_stock}}</text>
					</view>
					<image class="close" src="/static/image/icon/icon-close.png" @click="close_attr"></image>
				</view>
				<scroll-view class="center" :scroll-y="true">
					<view class="row" v-for="(item, index) in attr_groups" :key="index">
						<text class="attr-group-name">{{item.attr_group_name}}</text>
						<view class="attr-row dir-left-wrap">
							<view class="attr-item"
							      :class="{'active-attr-item': attr.active}"
							      v-for="(attr, ind) in item.attr_list"
							      :key="ind"
							      @click="select_attr(item, attr)"
							>{{attr.attr_name}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="bottom dir-left-nowrap main-between cross-center">
					<text>数量</text>
					<view class="num dir-right-nowrap main-between cross-center">
						<image class="image" src="/static/image/cart/can-be-added.png" @click="add_num"></image>
						<input type="number" class="input" :value="num" @change="change_num">
						<image class="image" :src="num === 1 ? '/static/image/cart/unreducible.png' : '/static/image/cart/can-be-reduced.png'" @click="edd_num"></image>
					</view>
				</view>
				<view :style="{height:`${height}rpx`}" >
				</view>
			</view>
		</app-iphone-x>
	</view>
</template>

<script>
    import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';

    export default {
        name: "detail-attr",
	    data() {
            return {
                image_url: ''
            }
	    },
	    props: {
            height: Number,
            cover_pic: String,
            attr: Array,
            attr_groups: Array,
            goods_stock: Number,
            attr_swell_deposit: String,
            attr_deposit: String,
            attr_stock: Number,
            price_member: Number,
            attr_price: String,
            level_show: Number,
            attr_price_member: Number,
            num: Number,
            attr_pic_url: String,
	    },
	    methods: {
            close_attr() {
                this.$emit('close_attr', true);
            },
            select_attr(data, item) {
                this.$emit('select_attr', data.attr_group_id, item.attr_id);
            },
            change_num(data) {
                this.$emit('change_num_data', Number(data.detail.value));
            },
		    add_num() {
                this.$emit('change_num', 1);
            },
		    edd_num() {
                if (this.num === 1) return;
                this.$emit('change_num', -1);
		    },
            clickImage() {
                let url = [];
                if (this.attr_pic_url) {
                    url.push(this.attr_pic_url);
                } else {
                    url.push(this.image_url);
                }
                uni.previewImage({
                    urls: url
                });
            }
	    },
	    mounted() {
            if (this.attr[0] && this.attr[0].pic_url) {
                this.image_url = this.attr[0].pic_url;
            } else {
	            this.image_url = this.cover_pic;
            }
	    },
	    components: {
            'app-iphone-x': appIphoneX,
        }
    }
</script>

<style scoped lang="scss">
	.detail-attr {
		width: #{750rpx};
		background-color: rgba(153,153,153,0.3);
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1500;
	}
	.attr-content {
		width: #{750rpx};
		border-top-left-radius: #{15rpx};
		border-top-right-radius: #{15rpx};
		background-color: #ffffff;
		padding: 0 #{24rpx};
		.top {
			height: #{155rpx};
			width: #{702rpx};
			border-bottom: #{1rpx} solid #e2e2e2;
			position: relative;
			.image-view {
				width: #{200rpx};
				height: #{200rpx};
				background-color: white;
				border-radius: #{9rpx};
				text-align: center;
				position: absolute;
				top: #{-63rpx};
				>image {
					width: #{192rpx};
					height: #{192rpx};
					margin-top: #{4rpx};
					border-radius: #{9rpx};
				}
			}
			.close {
				width: #{35rpx};
				height: #{35rpx};
				padding: #{5rpx};
				position: absolute;
				right: 0;
				top: #{20rpx};
			}
			.price {
				height: #{141rpx};
				margin-left: #{228rpx};
				width: #{441rpx};
				padding-top: #{28rpx};
				.stock {
					font-size: #{24rpx};
					color: #999999;
				}
				.des {
					font-size: #{22rpx};
					color: #ff4544;
					margin-bottom: #{5rpx};
				}
				.swell {
					font-size: #{24rpx};
					color:  #ff4544;
					margin-bottom: #{5rpx};
					.swell-text {
						font-size: #{21rpx};
					}
				}
			}
		}
		.center {
			max-height: #{333rpx};
			.row {
				width: #{702rpx};
				border-bottom: #{1rpx} solid #e2e2e2;
				padding: #{32rpx 0 0 0};
				font-size: #{25rpx};
				.attr-group-name {
					color: #666666;
				}
				.attr-row {
					margin-top: #{19rpx};
					.attr-item {
						height: #{57rpx};
						line-height: #{57rpx};
						text-align: center;
						border-radius: #{9rpx};
						color: #1b1b1b;
						margin-right: #{20rpx};
						padding: 0 #{24rpx};
						background-color: #f2f2f2;
						margin-bottom: #{32rpx};
					}
					.active-attr-item {
						color: #ffffff;
						background-color: #ff4544;
					}
				}
			}
			
		}
		.bottom {
			height: #{123rpx};
			width: #{702rpx};
			.num {
				width: #{260rpx};
				height: #{60rpx};
				.input {
					width: #{90rpx};
					height: #{60rpx};
					background-color: #f7f7f7;
					text-align: center;
				}
				.image {
					width: #{60rpx};
					height: #{60rpx};
				}
			}
		}
	}
</style>